<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡笔记</title>
	<style>
	* {
		padding: 0;
		margin: 0;
	}
	ul {
		list-style: none;
	}
	#tab, #content {
		margin: 0 auto;
		display: block;
		width: 400px;
		overflow: hidden;
	}
	#tab li {
		float: left;
		width: 98px;
		height: 30px;
		line-height: 30px;
		color: #333;
		text-align: center;
		border: 1px solid red;
		border-right: none;
		cursor: pointer;
	}
	#tab li:last-child {
		border: 1px solid red;
	}
	#tab li.cur {
		background-color: orange;
	}
	#content li {
		display: none;
		float: left;
		width: 396px;
		height: 100px;
		min-height: 100px;
		border: 1px solid red;
		border-top: none;
	}
	#content li.cur{
			display: block;
	}
	</style>
</head>
<body>
   <ul id='tab'>
   	<li class="cur">内容</li>
   	<li>内容</li>
   	<li>内容</li>
   	<li>内容</li>
   </ul>
   <ul id="content">
   	<li class="cur">咨询</li>
   	<li>1</li>
   	<li>2</li>
   	<li>3</li>
   </ul>
	<script>
     var tadLi = document.querySelectorAll('#tab li');// 找对象
     var content = document.querySelectorAll('#content li');
     var l = tadLi.length;
     for(var i = 0; i<l; i++) {
     	tadLi[i].index = i;
     	tadLi[i].onmouseover = function() {
     		for(var j = 0; j < l; j++) {
     			content[j].style.display = 'none'
     			tadLi[j].className = ''
     		}
     			this.className = 'cur'
				content[this.index].style.display = 'block'
     	}
     }
	</script>
</body>
</html>